<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Running long JavaScript processes in a web browser (optimized version)</title>

  
    
    <style>

body {
  padding:0;
  margin:1em;
}

#progressbar {
  position:relative;
  width:300px; height:20px;
  border:1px solid black;
  margin: 2em 0 0.5em;
  overflow:hidden;
}

#progressbar div {
  background:#316AC5;
  width:0; height:100%;
  color: #fff;
  text-indent: 10px;
}

#out {
  background: #def;
  border: 1px solid #789;
  margin-left: -2px;
  font: 10px Arial;
  height: 32px;
  width: 100%;
  overflow: auto;
}
    </style></head><body>
    <p>Sorting, please wait...</p>
    <div id="progressbar"><div style="width: 100%;"></div></div>
    <div id="out"></div>
    
    <script>

(function () {

    var i, length, data, el, start;
    var out = document.getElementById("out");

    // Initialize a few things...
    length = 2500;
    data = [];
    el = document.getElementById("progressbar").firstChild;

    // Setup an array of random integers...
    for (i = 0; i < length; i++) {
        //data[i] = Math.floor(Math.random() * length);
        data[i] = length-i;
    }

    i = 0;
    
    function sort () {
        var j, value, start;
        var _i = i;
        var _data = data;
  
        start = new Date().getTime();
        for (; _i < length; _i++) {
  
            for (j = length; j > _i; j--) {
                if (_data[j] < _data[j - 1]) {
                    value = _data[j];
                    _data[j] = _data[j - 1];
                    _data[j - 1] = value;
                }
            }
  
            if (new Date().getTime() - start > 75) {
                _i++;
                setTimeout(sort, 0);
                break;
            }
        }
  
        progressFn(_i, length);
        i = _i;
    };

    function pure_sort () {
        var j, value, start;
        var _data = data;
  
        start = new Date().getTime()
        for (var _i = 0; _i < length; _i++) {
  
            for (j = length; j > _i; j--) {
                if (_data[j] < _data[j - 1]) {
                    value = _data[j];
                    _data[j] = _data[j - 1];
                    _data[j - 1] = value;
                }
            }
        }
        progressFn(_i, length);  
    };
    
    function oldsort () {
        var j, value, start;
  
        start = new Date().getTime()
        for (; i < length; i++) {
  
            for (j = length; j > i; j--) {
                if (data[j] < data[j - 1]) {
                    value = data[j];
                    data[j] = data[j - 1];
                    data[j - 1] = value;
                }
            }
  
            if (new Date().getTime() - start > 40) {
                i++;
                setTimeout(arguments.callee, 0);
                break;
            }
        }
  
        progressFn(i, length);
  
    };
    
    function progressFn(value, total) {
        el.style.width = (100 * value / total) + "%";
        if (value >= total) {
            el.innerHTML = "Total duration: " + ((new Date().getTime() - start) / 1000) + " seconds";
            out.innerHTML = data+"";        }
    }

    start = new Date().getTime();
    sort();

})();

    </script>
  
</body></html>